<template>
  <img src="../../assets/head.png" class="headImgSty" />
  <section class="tabBox">
    <section
      class="tabItem"
      :class="classId == item.id ? 'addSty' : ''"
      v-for="(item, index) in classList"
      :key="index"
      @click="classClick(item.id)"
    >{{ item.name }}</section>
  </section>

  <section class="flex-around addFlex">
    <!-- 文章板块 -->
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
      <li
        v-for="(item, index) in articleList"
        :key="index"
        class="contentItemSty flex-start"
        @click="goDetail(item.articleId)"
      >
        <img src="../../assets/user.png" class="conImgSty" />
        <section class="textSty conBtnSty">
          <h2>{{ item.name }}</h2>
          <section class="flex-between">
            <section>作者： {{ item.uname }} 评论： 100</section>
            <section>发布时间: {{ filterTime(item.time) }}</section>
          </section>
        </section>
      </li>
    </ul>

    <!-- 登录/用户信息 -->
    <section v-if="!token">
      <el-card class="cardSty">
        <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          class="image"
        />
        <div style="padding: 14px">
          <h3>还没登录呢</h3>
          <div class="bottom">
            <div class="time">2020-12-12</div>
            <el-button type="text" class="button" @click="goLoginOut">去登陆</el-button>
          </div>
        </div>
      </el-card>
    </section>

    <section v-else>
      <el-card class="cardSty">
        <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          class="image"
        />
        <div style="padding: 14px">
          <h3>{{ name }}</h3>
          <div class="bottom">
            <div class="time">{{ year + '-' + month + '-' + date }}</div>
            <div>欢迎访问我的博客!</div>
          </div>
        </div>
      </el-card>
      <el-button class="fabuSty" type="primary" @click="PublishArticles()">发布文章</el-button>
      <el-button class="fabuSty" type="primary" @click="goLoginOut()">退出登录</el-button>
    </section>
  </section>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { getClass, readArticle } from '../../api/index'
const token = sessionStorage.getItem('token')
const name = sessionStorage.getItem('name')
const year = new Date().getFullYear()
const month = new Date().getMonth() + 1
const date = new Date().getDate()
const router = useRouter()
let classList = ref([
  { name: '名称', id: 0 }
])
const classId = ref(0)
let articleList = ref([{
  uname: '',
  name: '',
  contentHtml: '',
  articleId: 0,
  time: '',
}])
function load() {

}
function goDetail(id: number) {
  console.log('sdj:',id)
  router.push({
    path: '/article',
    query: {
      id: id,
    },
  });

}
function PublishArticles() {
  router.push('/publish')
}
function classClick(id: number) {
  classId.value = id
}
function getClassFun() {
  getClass().then((res: any) => {
    classList.value = res.data
    classId.value = res.data[0].id
    console.log(classList)
  })
}
getClassFun()

function getArticleListFun() {
  let patams = {
    classId: 1
  }
  readArticle(patams).then((res: any) => {
    articleList.value = res.data
  })
}
getArticleListFun()
function goLoginOut() {
  sessionStorage.clear()
  router.push('/login')
}
const filterTime = computed(() => (time: string) => {
  return formatDate(Number.parseInt(time))
})

function formatDate(str: string | number | Date) {
  let date = new Date(str);
  let year = date.getFullYear();
  let month: string | number = date.getMonth() + 1;
  month = month < 10 ? ('0' + month) : month;
  let day: string | number = date.getDate();
  day = day < 10 ? ('0' + day) : day;
  let h: string | number = date.getHours();
  h = h < 10 ? ('0' + h) : h;
  let m: string | number = date.getMinutes();
  m = m < 10 ? ('0' + m) : m;
  let s: string | number = date.getSeconds();
  s = s < 10 ? ('0' + s) : s;
  return year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s;
}
</script>

<style>
.addSty {
  background: #378fd6 !important;
  color: #fff;
}
.fabuSty {
  margin-top: 0.2rem;
}
.cardSty {
  margin-top: 8px;
  width: 3rem !important;
}
.infinite-list {
  height: 500px;
  width: 80%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image {
  width: 100%;
  display: block;
}

.conBtnSty {
  width: 100%;
}
.textSty {
  text-align: left;
}
.contentItemSty {
  width: 12rem;
  margin: 1rem 0;
  padding: 0 0.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #ccc;
}
.conImgSty {
  width: 1.2rem;
  margin-right: 0.3rem;
}
.headImgSty {
  width: 100%;
  height: 3rem;
}
.tabBox {
  width: 100%;
  height: 0.5rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.1rem 0;
}
.tabItem {
  width: 1.3rem;
  padding: 8px 0;
  border-radius: 4px;
  text-align: center;
  background: #f1f1f1;
}
.addFlex {
  align-items: flex-start;
}
</style>